<html>
<head>
    <title>UserManage系统注册页面</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <!-- bootstrap样式表 -->
    <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css" />
    <!-- 时间选择器样式表 -->
    <link rel="stylesheet" type="text/css" href="assets/css/bootstrap-datetimepicker.min.css" />
    <!-- jquery -->
    <script src="assets/js/jquery3.3.1.min.js"></script>
    <!-- bootstrap脚本 -->
    <script src="assets/js/bootstrap.min.js"></script>
    <!-- 时间选择器前置脚本 -->
    <script src="assets/js/moment-with-locales.min.js"></script>
    <!-- 时间选择器核心脚本 -->
    <script src="assets/js/bootstrap-datetimepicker.min.js"></script>
    <!-- 显示提示信息插件 使用此插件必须有一个"tip" ID-->
    <script src="assets/js/showtip.js"></script>
    <style type="text/css">

        #form{
            height:450px;
            width:400px;
            top:40%;
            left:60%;
            position:absolute;
            padding: 1em;
            margin-top:-100px;
            margin-left:-100px;
            border-radius: .3em;
            background: hsla(0,0%,100%,.25) border-box;
            padding: 10px;
            box-shadow: 0 0 0 1px hsla(0,0%,100%,.3) inset,
                        0 .5em 1em rgba(0, 0, 0, 0.6);
            text-shadow: 0 1px 1px hsla(0,0%,100%,.3);

        }
        #form:before{
            content: '';
            position: absolute;
            top: 0; right: 0; bottom: 0; left: 0;
            margin: -30px;
            z-index: -1;
            -webkit-filter: blur(20px);
            filter: blur(20px);

        }
        h1{
            position:absolute;
            left: 63%;
            top:18%;
            height: 30px;
            transform:translateY(-50%);
        }
        input{
            margin-right: 30px;
        }
        body {
            /*背景图像仅仅显示一次*/
            background-repeat: no-repeat;
            background-image: url("assets/imgs/registerBg.jpg");
            width: 100%;
            height: 100%;
            /*图片居中*/
            margin: auto;
        }
        #tip {
            position: absolute;
            min-width: 200px;
            text-align: center;
            top: 80px;
            left: 68%;
            display: none;
            z-index: 9999;
        }
        .right_tip {
            min-height: 30px;
            min-width: 150px;
            position: absolute;
            z-index: 9999;
            padding: 5px;
        }


    </style>
</head>
<body>
    <h1>用户注册</h1>
    <strong id="tip"></strong>
    <div id="check_tip" style="display: none;" class="alert-danger right_tip"></div>
    <div id="sno_tip" style="display: none;" class="alert-danger right_tip"></div>
    <div id="password_tip" style="display: none;" class="alert-danger right_tip"></div>
    <div id="mail_tip" style="display: none;" class="alert-danger right_tip"></div>
    <div id="phone_tip" style="display: none;" class="alert-danger right_tip"></div>

    <div id="form">

        <form class="form-horizontal" id="register" action="#" method="post">
            <br>
            <div class="form-group">
                <label  class="col-sm-3 control-label">学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号</label>
                <div class="col-sm-9">
                    <input type="text" class="form-control" id="sno" placeholder="请输入学号" name="sno">
                </div>
            </div>
            <div class="form-group">
                <label  class="col-sm-3 control-label">用&nbsp;户&nbsp;名&nbsp;</label>
                <div class="col-sm-9">
                    <input type="text" class="form-control" id="username" placeholder="学生姓名" name="username">
                </div>
            </div>
            <div class="form-group">
                <label  class="col-sm-3 control-label">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码</label>
                <div class="col-sm-9">
                    <input type="password" class="form-control" id="password" placeholder="密码仅支持字母和数字" name="password">
                </div>
            </div>
            <div class="form-group">
                <label  class="col-sm-3 control-label">确认密码</label>
                <div class="col-sm-9">
                    <input type="password" class="form-control"  id="check" placeholder="再次输入以确认密码">
                </div>
            </div>

            <div class="form-group">
                <label  class="col-sm-3 control-label">生&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日</label>
                <div class="col-sm-9">
                    <input type="text" class="form-control" id="birth" name="birth" placeholder="轻点以触发日历选择" />
                </div>
            </div>

            <div class="form-group">
                <label  class="col-sm-3 control-label">手机号码</label>
                <div class="col-sm-9">
                    <input type="text" id="phone" class="form-control"  name="phone" placeholder="请输入11位电话号码">
                </div>
            </div>

            <div class="form-group">
                <label  class="col-sm-3 control-label">邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱</label>
                <div class="col-sm-9">
                    <input type="text" id="mail" class="form-control" name="mail"  placeholder="请输入正确的邮箱格式">
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-offset-3 col-sm-9">
                    <input type="reset" class="btn btn-primary" value="重置" />
                    <input type="button" onclick="register()" class="btn btn-success" value="注册" />
                </div>
            </div>
        </form>
        <div id="filter"></div>
    </div>
</body>


<script>
    var is_sno_match;
    var is_phone_match;
    var is_psw_match;
    var is_mail_match;
    $(function () {
        $.fn.serializeFormJSON=function(){

            var o={};
            var a=this.serializeArray();
            $.each(a,function(){
                if(o[this.name]){
                    if(!o[this.name].push){
                        o[this.name]=[o[this.name]];
                    }
                    o[this.name].push(this.value||'');
                }else{
                    o[this.name]=this.value||'';
                }
            });
            return o;
        };

        $("#birth").datetimepicker({
            format: 'YYYY-MM-DD',
            locale: moment.locale('zh-CN')
        });

        $("#check").on('blur',function () {
            if ($('#password').val() != $('#check').val()) {
                rigth_tip("check", "两次密码输入不一致！");
            } else {
                cancel_tip("check");
            }
        });

        $("#password").on('blur',function () {
            check()
        })
        $("#sno").on('blur',function () {
            check()
        })
        $("#phone").on('blur',function () {
            check()
        })
        $("#mail").on('blur',function () {
            check()
        })
        
    });

    function check() {
        $.ajax({
            'url': "/user/check",
            'type': "POST",
            'dataType': "json",
            // 总之，别加这个contentType,否则使用POST，后台无法收到值
            // 'contentType': 'application/json;charset=utf-8',
            'data': {
                sno: $('#sno').val(),
                password: $('#password').val(),
                phone: $('#phone').val(),
                mail: $('#mail').val()
            },
            success: function (res) {
                var data = res['data'];
                is_sno_match = data['sno'];
                is_psw_match = data['password'];
                is_mail_match = data['mail'];
                is_phone_match = data['phone'];
                if($('#sno').val() != "" && !is_sno_match) {
                    rigth_tip('sno', "学号必须为15位或16位！")
                } else if(is_sno_match) {
                    cancel_tip('sno');
                }
                if($('#password').val() != "" && !is_psw_match) {
                    rigth_tip('password', "密码必须由数字和字母组成！")
                } else if(is_psw_match) {
                    cancel_tip('password')
                }
                if($('#mail').val() != "" && !is_mail_match) {
                    rigth_tip('mail', "邮箱格式不正确！")
                } else if(is_mail_match) {
                    cancel_tip('mail')
                }
                if($('#phone').val() != "" && !is_phone_match) {
                    rigth_tip('phone', "手机号码格式不正确！")
                } else if(is_phone_match) {
                    cancel_tip('phone')
                }
            },
            error: function () {
                ShowFailure("出现异常!")
            }
        })
    }
    
    function rigth_tip(id, str) {
        var l = $('#'+ id).offset().left+ 310;
        var t = $('#'+ id).offset().top + 4;
        $('#' + id + '_tip').html(str);
        $('#' + id + '_tip').css("left", l + "px");
        $('#' + id + '_tip').css("top", t + "px");
        $('#' + id + '_tip').css("display", "");
    }

    function cancel_tip(id) {
        $('#' + id + '_tip').css("display", "none");
    }
    
    function register() {
        if ($('#sno').val() == "") {
            ShowWarn("学号不能为空!");
        } else if ($('#username').val() == "") {
            ShowWarn("姓名不能为空！");
        } else if ($('#password').val() == "") {
            ShowWarn("密码不能为空！");
        } else if ($('#check').val() == "") {
            ShowWarn("检验密码不能为空！")
        } else if ($('#birth').val() == "") {
            ShowWarn("生日不能为空！")
        } else if($('#phone').val() == "null") {
            ShowWarn("手机号码不能为空!")
        }
        else {
            var user = $('#register').serializeFormJSON();
            $.ajax({
                type: "POST",
                dataType: "json",
                url:"/user/register",
                data: JSON.stringify(user),
                contentType: "application/json; charset=utf-8",
                success: function (res) {
                    var code = res['code'];
                    var msg = res['msg'];
                    if ((code == -1) || (code == 2) ||(code == 3)) {
                        ShowFailure(msg)
                    }else if(code == 200) {
                        ShowSuccess("注册成功,返回登录页面");
                        setTimeout("location.href='/login.html'",3000);
                    }
                },
                error: function (res) {
                    ShowFailure("服务器繁忙")
                }
            })
        }
    }
</script>

</html>